﻿const path = require('path');
const isProd = process.env.NODE_ENV === 'production';
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //引入webpack-bundle-analyzer
function resolve (dir) {
  return path.join(__dirname, './', dir);
}
// 定义一些公用参数，以供项目中使用
const pluginOptions = {
    // 项目名
    projectName: 'client.pc.vue',
    // 本地ip 允许外部ip访问 
    host: '0.0.0.0',
    // 定义端口
    port: 8080,
    // 登录的地址，需要一个client_id
    loginPath: ''
}
const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'vue-lazyload': 'VueLazyload'
  },
  css: [],
  js: [
    'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
    "https://unpkg.com/vue-lazyload/vue-lazyload.js"
  ]
}
module.exports = {
    pluginOptions,
    // 部署应用包时的基本 URL
    publicPath: '/',
    // 输出文件目录
    outputDir: 'dist', 
    // 静态资源文件的目录
    assetsDir: 'assets',
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    // webpack配置
    chainWebpack: (config) => {
        config.plugin('html')
            .tap(args => {
                // 将系统配置信息注入到HtmlWebpackInlinePlugin
                Object.assign(args[0], pluginOptions)
                // 设置页面标题的icon
                args[0].favicon = resolve('public/favicon.ico')
                // if prod is on assets require on cdn
                if(isProd) args[0].cdn = assetsCDN;
                return args
            });
        config.plugin('define').tap(args => {
            args[0]['CONFIG'] = JSON.stringify(pluginOptions)
            return args
        });
        if(isProd) {
            //使用webpack-bundle-analyzer 生成报表
            config.plugin('analyzer').use(new BundleAnalyzerPlugin());
            //优化lodash
            config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
        }
    },
    configureWebpack: (config) => {
        if (isProd) {
            // 为生产环境修改配置...
            config.mode = 'production';
            config.externals = assetsCDN.externals;
        } else {
            // 为开发环境修改配置...
            config.mode = 'development';
        }
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                extensions: ['.js', '.vue', '.json'], // 可以省略后缀名
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    '@p': path.resolve(__dirname, './src/views')
                } // 别名配置
            }
        });
        // 单个asset静态资源文件的大小最大为409600B==>400KB,超过400KB则会给出警告
        config.performance = {
            maxAssetSize: 1024 * 400
        };
    },
    // 是否生成sourcemap文件，生成环境不生成以加速生产环境构建
    productionSourceMap: !isProd,
    // css相关配置
     css: {
        // extract: true, // 是否使用css分离插件 ExtractTextPlugin
        // sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
            // css: {}, // 这里的选项会传递给 css-loader
            // postcss: {} // 这里的选项会传递给 postcss-loader
            less: {
                javascriptEnabled: true 
            }
         }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
        // requireModuleExtension: false // 启用 CSS modules for all css / pre-processor files.
    },
    // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    parallel: require('os').cpus().length > 1, 
    // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {}, 
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: pluginOptions.host,
        port: pluginOptions.port,
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        proxy: {
            // 配置多个代理
			//使用IIS代理时记得要安装ARR https://blog.csdn.net/qq_26298771/article/details/89561987
            // For IIS Url Rewrite(Regex): ^api/?(.*)$
            "/api": {
                //记得每次修改，都需要重新build
                target: "http://localhost:5000",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
                    "^/api": "/api" 
                }
            },
            // For IIS Url Rewrite(Regex):  ^.+images/?(.*)$
            '/images/': { 
                target: 'http://localhost:5000',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                  '^/images': ''
                }
            }
        }
    }
}